import React, { Component, Fragment } from 'react';
import styles from './InterviewResult.less';
import {
  LeftOutlined,
  RightOutlined,
  CheckCircleOutlined,
  CheckCircleFilled,
  UserOutline,
  StarFilled,
  SearchOutlined
} from '@ant-design/icons';
import { Row, Col, notification, ConfigProvider, Tree } from 'antd';
import { history } from 'umi';
import request from '@/utils/request'
import moment from 'moment'
import PublicUtils from "@/utils/publicUtils";
import pendUser from '@/assets/pendUser.png';


import { Tag, Form, Input, Button, TextArea, Popup, CheckList, List, Calendar, IndexBar, SearchBar, Avatar } from 'antd-mobile'


export default class pendingEmploymentDetail extends Component {
  constructor(props) {
    super(props);
    this.state = {
      title: '面试反馈',
      staffId: '',
      chooseStaffType: false,   //是否选择员工类型
      staffType: 0,   //员工类型
      staffTypeValue: "",//员工类型值
      chooseStaffJob: false,   //是否选择职务/技能
      staffJob: 0,   //职务/技能
      staffJobValue: "",//职务/技能值
      positionData: [], // 职务
      originalPositionData: [], // 新增用于保存原始职务数据的state
      levelData: [], // 职级
      originalLevelData: [], // 新增用于保存原始职级数据的state
      levelList: [], // 职级列表
      total: 0,
      pageNum: 1,
      pageSize: 20,
      jobLevelValue: '',
      chooseJobLevel: false,
      jobLevel: 0,
      choosejoinTime: false,
      joinTime: '',
      chooseSsaid: false,
      ssaid: 0,  //工作地区
      ssaidValue: '',
      workLocaleList: [], // 工作地区,
      chooseLeader: false,
      leaderId: 0,
      leaderValue: '',
      chooseRecruit: false,
      recruitId: 0,
      recruitValue: '',
      choosecId: false,
      cId: 0,
      cIdValue: '',
      payCardList: [], // 工资卡银行
      socinsuList: [], // 社保缴纳方式
      socialAgencyList: [], // 社保缴纳机构
      socialAgencyId: 0,
      socialAgencyValue: '',
      chooseSocialAgency: false,
      choosePaymentMethod: false,
      paymentMethodId: 0,
      paymentMethodValue: '',
      recruitData: [], // 直属上级/招聘人
      originalRecruitData: [],
      chooseDept: false,
      deptId: 0,
      deptValue: '',
      selectedNodes: [],
      treeData: [],
      originalTreeData: [],
      data: {},

    }
    this.formRef = React.createRef();
  }

  componentDidMount() {
    const queryParams = new URLSearchParams(history.location.search);
    const staffId = queryParams.get('staffId');
    this.setState({
      staffId: staffId,
    }, () => {
      this.getLevelList(); // 获取职级列表
      this.getLocalListByArea();
      this.getMainCompanyOrCard();
      this.getSocialAgencyConfigs();
      this.getSocinsuList();
      this.getrecruitData();
      this.getTreeData()
      if (staffId) {
        this.getDetails(staffId);
      }
    })
  }

  //获取待入职详情
  getDetails = async (staffId) => {
    const res = await request.get('/staff/onboardingManagementDetail', {
      params: {
        staffId
      }
    });
    if (res && res.error_code === 200) {
      const data = !res.data ? {} : res.data
      this.setState({
        data: { ...data },
      }, () => {
        this.editDetail()
      })
    } else {
      notification.error({
        message: res ? res.error_msg : '请求错误'

      })
    }
  }

  //编辑回显数据
  editDetail = () => {
    const { data } = this.state;
    this.setState({
      staffTypeValue: PublicUtils.getStaffType(data.staffType),
      staffJob: data.staffJob,
      staffJobValue: data.staffJobName,
      jobLevelValue: data.levelName,
      ssaidValue: data.workLocale,
      joinTime: data.joinTime ? moment(data.joinTime).format('YYYY-MM-DD') : '',
      probationMonthNumValue: data.probationMonthNum,
      contractYearNumValue: data.contractYearNum,
      socialAgencyValue: data.interviewSalaryRes.socialAgencyName,
      paymentMethodValue: data.interviewSalaryRes.paymentMethodName,
      deptValue: data.deptName,
      leaderValue: data.leaderName,
      recruitValue: data.recruitName,
      cIdValue: data.interviewSalaryRes.bankName,

    }, () => {
      this.getDutyById(data.staffType, true);
      this.formRef.current.setFieldsValue({
        staffName: data.staffName,
        phoneNum: data.phoneNum,
        staffType: data.staffType,
        ssaid: data.ssaid,
        joinTime: data.joinTime ? moment(data.joinTime) : '',
        probationMonthNum: data.probationMonthNum,
        staffJob: data.staffType == 1 ? data.skill : data.staffJob,
        jobLevel: data.staffType == 1 ? data.skillLevel : data.jobLevel,
        contractYearNum: data.contractYearNum,
        bankName: data.interviewSalaryRes.bankName,
        // cId: data.cId,
        cId: data.interviewSalaryRes.bankName,
        beforeSalary: data.interviewSalaryRes.beforeSalary,
        afterSalary: data.interviewSalaryRes.afterSalary,
        socialAgency: data.socialAgency,
        paymentMethodId: data.paymentMethodId,
        deptId: { deptName: data.deptName, deptId: data.deptId },
        leaderId: { leaderName: data.leaderName, leaderId: data.leaderId },
        recruitId: { recruitName: data.recruitName, recruitId: data.recruitId },
        description: data.description
      })
    })
  }

  onFinish = async (values) => {
    console.log(values);
    const { payCardList, staffId } = this.state;
    try {
      await this.formRef.current.validateFields();
      console.log(values);
      const joinTime = values.joinTime && moment(values.joinTime).format('YYYY-MM-DD');
      let data = {
        staffSource: 1, //标识是面试结果录入
        staffId,
        ...values,
        joinTime,
        ...values.deptId,
        ...values.leaderId,
        ...values.recruitId,
        staffJob: values.staffType == 1 ? undefined : values.staffJob,
        skill: values.staffType == 1 ? values.staffJob : undefined,
        jobLevel: values.staffType == 1 ? undefined : values.jobLevel,
        skillLevel: values.staffType == 1 ? values.jobLevel : undefined,
        cId: values.cId,
        bankName: payCardList.find(item => item.cId === values.cId)?.bankName,

      };

      let res = {};
      if (!staffId) {
        res = await request.put('/staff/standard/add', {
          data
        });
      } else {
        // 编辑岗位信息
        res = await request.post('/staff/standard/updateStaffPositionInfo', {
          data
        });
        console.log(values.bankName)
        // 编辑薪资信息
        res = await request.post('/staff/UpdateSalaryEmployment', {

          data: {
            staffSource: 1, //标识是面试结果录入
            staffId,
            bankName: values.bankName,
            beforeSalary: values.beforeSalary,
            afterSalary: values.afterSalary,
            socialAgency: values.socialAgency,
            paymentMethodId: values.paymentMethodId,
          }
        });
      }

      if (res.error_code === 200) {
        notification.success({ message: `员工${!staffId ? '新增' : '编辑'}成功` });
        // 重置表单
        this.formRef.current.resetFields();
        // 关闭抽屉
        this.setState({ staffId: '' }, () => {
          history.go(-1);
        });
      } else {
        notification.error({ message: res ? res.error_msg : '请求错误' });
      }
    } catch (info) {
      console.log('Validate Failed:', info);
      return false;
    }
  };


  submit = () => {
    this.setState({
      chooseStaffType: false
    })
  }
  onClose = () => {

  }




  // 职务列表
  getPositionList = (value) => {
    const { pageSize, pageNum } = this.state;
    // 职务权限列表
    request
      .get('/sysRole/list', {
        params: {
          pageNum: 1,
          pageSize: 1000,
          orderById: value
        }
      })
      .then(res => {
        if (res && res.error_code === 200) {
          const positionData = res.data.records.map((res, index) => {
            return {
              dvId: res.dutyId,
              dictValue: res.dutyId,
              dictValueDesc: res.dutyName,
              orderById: res.orderById
            }
          })
          this.setState({ positionData: positionData || [], originalPositionData: positionData || [] }, () => {
            let staffJob = this.formRef.current.getFieldValue('staffJob');
            this.getStaff(staffJob, true);
          });
        } else {
          notification.error({ message: res ? res.error_msg : '请求错误' });
        }
      });
  };

  // 本部员工下拉框
  getDutyById = (value, type) => {
    const { staffType } = this.state;
    this.setState({
      chooseStaffType: false,
      staffTypeValue: PublicUtils.getStaffType(staffType)
    })
    this.formRef.current.setFieldsValue({ staffType: staffType })
    // type !== true && this.props.form.setFieldsValue({
    //     staffJob: undefined,
    //     jobLevel: undefined
    // });
    staffType === 3 && this.formRef.current.setFieldsValue({ socialAgency: undefined, paymentMethodId: undefined })
    if (staffType == 1) {
      this.setState({
        positionData: PublicUtils.getDictionary('TECH_TYPES'),
        originalPositionData: PublicUtils.getDictionary('TECH_TYPES'),
        levelData: PublicUtils.getDictionary('PROJECT_STAFF_LEVEL').map(item => {
          return { levelId: item.dictValue, levelName: item.dictValueDesc }
        }),
        originalLevelData: PublicUtils.getDictionary('PROJECT_STAFF_LEVEL').map(item => {
          return { levelId: item.dictValue, levelName: item.dictValueDesc }
        })
      })
    } else {
      this.getPositionList(staffType);
    }
  };



  // 职务/技能联动
  getStaff = () => {
    const { staffJob } = this.state;
    const staffType = this.formRef.current.getFieldValue('staffType');
    this.formRef.current.setFieldsValue({ staffJob: staffJob })
    if (staffType !== 1) {
      this.formRef.current.setFieldsValue({ toJobLevel: undefined });
      // 尝试找到匹配的 orderById，并安全地访问 children
      const orderById = this.state.positionData.find(item => item.dictValue === staffJob)?.orderById;
      if (orderById) {

        const levelListItem = this.state.levelList.find(item => item.orderById === orderById);
        if (levelListItem && Array.isArray(levelListItem.children)) {
          // 只有当找到有效的 levelListItem 且其 children 是数组时才更新状态
          this.setState({ levelData: levelListItem.children, originalLevelData: levelListItem.children }, () => {
          });
        }

      } else {
        this.setState({ levelData: [], originalLevelData: [] }); // 或者其他默认状态
      }
    }
    this.setState({
      chooseStaffJob: false,
      staffJobValue: this.state.positionData.find(item => item.dictValue === staffJob)?.dictValueDesc
    })
  };

  // 级别列表
  getLevelList = value => {
    request
      .get('/sysUser/levelList', {
        params: {
          pageNum: 1,
          pageSize: 1000,
          orderById: value
        }
      })
      .then(res => {
        if (res && res.error_code === 200) {
          // const result = res.data.map(item => { return item.children });
          this.setState({ levelList: res.data || [] });
        } else {
          notification.error({ message: res ? res.error_msg : '请求错误' });
        }
      });
  };

  // 获取某地区下的地址列表
  getLocalListByArea = area => {
    request
      .get('/staffArea/localListByArea')
      .then(res => {
        if (res && res.error_code === 200) {
          const result = res.data ? res.data : [];
          this.setState({ workLocaleList: res.data ? res.data : [] });
        } else {
          notification.error({ message: res ? res.error_msg : '请求错误' });
        }
      });
  };

  // 主体公司 0 主体公司 1 工资卡
  getMainCompanyOrCard = cType => {
    request
      .get(`/personnelConfig/mainCompanyConfigs/${1}`, {
        params: { activated: 1 }
      })
      .then(res => {
        if (res && res.error_code === 200) {
          const result = !res.data ? [] : res.data;
          this.setState({ payCardList: result });
        } else {
          notification.error({ message: res ? res.error_msg : '请求错误' });
        }
      });
  };

  // 社保缴纳机构
  getSocialAgencyConfigs = () => {
    request.get('/personnelConfig/socialAgencyConfigs').then(res => {
      if (res && res.error_code === 200) {
        this.setState({ socialAgencyList: !res.data ? [] : res.data });
      } else {
        notification.error({ message: res ? res.error_msg : '请求错误' });
      }
    });
  };

  // 获取社保缴纳方式
  getSocinsuList = () => {
    request.get('/personnelConfig/paymentMethods').then(res => {
      if (res && res.error_code === 200) {
        const socinsuList = res.data;
        this.setState({ socinsuList });
      } else {
        notification.error({ message: res ? res.error_msg : '请求错误' });
      }
    });
  };

  // 获取成员信息
  getrecruitData = () => {
    request.get('/staff/getStaffInfoGroupBySurname').then(res => {
      if (res && res.error_code === 200) {
        const recruitData = res.data;
        this.setState({ recruitData, originalRecruitData: recruitData });
      } else {
        notification.error({ message: res ? res.error_msg : '请求错误' });
      }
    });
  };


  //获取部门数据
  getTreeData = () => {
    request.get('/dept/deptTree').then(res => {
      if (res && res.error_code === 200) {
        const treeData = res.data;
        this.setState({ treeData, originalTreeData: treeData });
      } else {
        notification.error({ message: res ? res.error_msg : '请求错误' });
      }
    });
  }

  //搜索职务/技能
  searchStaffJob = value => {
    const { originalPositionData } = this.state;
    if (value) {
      const staffJob = originalPositionData.filter(item => item.dictValueDesc === value);
      this.setState({ positionData: staffJob });
      console.log(staffJob);
    } else {
      // 当value为空时，恢复显示原始数据
      this.setState({ positionData: originalPositionData });
    }
  }

  //搜索职级/级别
  searchJobLevel = value => {
    const { originalLevelData } = this.state;
    if (value) {
      const levelData = originalLevelData.filter(item => item.levelName === value);
      this.setState({ levelData: levelData });
      console.log(levelData);
    } else {
      // 当value为空时，恢复显示原始数据
      this.setState({ levelData: originalLevelData });
    }
  }

  //搜索部门
  searchDepartmentName = value => {
    this.filterTreeData(value);
  }

  // 过滤树数据的方法，根据搜索文本筛选出符合条件的树节点
  filterTreeData = (searchText) => {
    const { originalTreeData } = this.state;
    if (!searchText) {
      // 当搜索文本为空时，显示全部树数据
      this.setState({ treeData: originalTreeData });
      return;
    }

    const filteredData = [];
    const filterNode = (node) => {
      if (node.departmentName.toLowerCase().includes(searchText.toLowerCase())) {
        const newNode = { ...node };
        if (node.children) {
          newNode.children = node.children.filter(filterNode);
        }
        filteredData.push(newNode);
      } else if (node.children) {
        node.children.forEach(filterNode);
      }
    };

    originalTreeData.forEach(filterNode);

    this.setState({ treeData: filteredData });
  }

  //搜索直属上级
  searchLeader = value => {
    const { originalRecruitData } = this.state;
    if (!value) {
      // 当搜索文本为空时，显示全部原始数据
      this.setState({ recruitData: originalRecruitData });
      return;
    }

    const filteredData = [];
    originalRecruitData.forEach(group => {
      const { surname, staffInfoGroupBySurnames } = group;
      const filteredStaffInfo = staffInfoGroupBySurnames.filter(item =>
        item.staffName.toLowerCase().includes(value.toLowerCase())
      );

      if (filteredStaffInfo.length > 0) {
        filteredData.push({
          surname,
          staffInfoGroupBySurnames: filteredStaffInfo
        });
      }
    });

    this.setState({ recruitData: filteredData });
  }


  render() {
    const {
      title,
      chooseStaffType,
      staffType,
      staffTypeValue,
      chooseStaffJob,
      staffJob,
      staffJobValue,
      positionData,
      levelData,
      jobLevel,
      jobLevelValue,
      chooseJobLevel,
      choosejoinTime,
      joinTime,
      chooseSsaid,
      ssaid,
      ssaidValue,
      workLocaleList,
      chooseLeader,
      leaderId,
      leaderValue,
      chooseRecruit,
      recruitId,
      recruitValue,
      choosecId,
      cId,
      cIdValue,
      payCardList, // 工资卡银行
      socinsuList, // 社保缴纳方式
      socialAgencyList, // 社保缴纳机构
      socialAgencyId,
      socialAgencyValue,
      chooseSocialAgency,
      choosePaymentMethod,
      paymentMethodId,
      paymentMethodValue,
      recruitData,
      chooseDept,
      deptId,
      deptValue,
      selectedNodes,
      treeData
    } = this.state;

    const formItemLayout = {
      labelCol: { span: 20 },
    };


    return (
      <div className={styles.contain}>
        <div className={styles.headerTitle}>
          <Row style={{ width: '100%', height: '100%', justifyContent: 'center', alignItems: 'center' }}>
            <Col style={{ marginLeft: '20px', fontSize: '18px', color: '#409EFF' }} onClick={() => history.go(-1)}>
              <LeftOutlined style={{ fontSize: '20px', color: '#409EFF' }} />返回
            </Col>
            <Col offset={20} style={{ marginLeft: '25px', flexGrow: 1 }}>
              <div style={{ fontSize: '18px', color: '#333333', fontWeight: 'bold' }}>{title}</div>
            </Col>
          </Row>
        </div>
        <div className={`${styles.formContext}`}>

          <Form {...formItemLayout} layout='horizontal' onFinish={this.onFinish} mode='card' ref={this.formRef} footer={
            <Button block type='submit' color='primary' size='large'>
              提交资料
            </Button>
          } style={{ '--prefix-width': '10em' }}>
            <Form.Header>
              <Row style={{ height: '50px', display: 'flex', alignItems: 'center' }}>
                <Tag color='#409EFF' style={{ height: '20px' }}></Tag>
                <Col style={{ fontSize: '18px', marginLeft: '10px' }}>基本信息</Col>
              </Row>
            </Form.Header>
            <Form.Item
              label='姓名'
              name='staffName'
              rules={[{ whitespace: true, required: true, message: '请输入姓名' },
              { pattern: /^[A-Za-z0-9・·\u4e00-\u9fa5]{2,20}$/, message: '姓名格式错误或超出限定范围（20字）' }]}>
              <Input placeholder='请输入真实姓名' style={{ '--text-align': 'right' }} />
            </Form.Item>
            <Form.Item
              label='联系方式'
              name='phoneNum'
              rules={[{ whitespace: true, required: true, message: '请输入联系方式' },
              { pattern: /^1[3456789]\d{9}$/, message: '请输入正确格式的联系方式' }]}
            >
              <Input placeholder='请输入手机号码' style={{ '--text-align': 'right' }} />
            </Form.Item>
            <Form.Item
              label='员工类别'
              name='staffType'
              initialValue={0}
              rules={[{ required: true, message: '请选择员工类别' }]}
            >
              <div style={{ textAlign: 'right', color: `${staffTypeValue === "" ? "#9999" : ""}` }} onClick={() => { this.setState({ chooseStaffType: true }) }}>
                {staffTypeValue ? staffTypeValue : "请选择"} <RightOutlined />
              </div>
            </Form.Item>
            <Form.Item
              label='职务/技能'
              name='staffJob'
              rules={[{ required: true, message: '请选择职务/技能' }]}
            >
              <div style={{ textAlign: 'right', color: `${staffJobValue === "" ? "#9999" : ""}` }} onClick={() => { this.setState({ chooseStaffJob: true }) }}>
                {staffJobValue ? staffJobValue : "请选择"} <RightOutlined />
              </div>
            </Form.Item>
            <Form.Item
              label='职级/级别'
              name='jobLevel'
              rules={[{ required: true, message: '请选择职级/级别' }]}
            >
              <div style={{ textAlign: 'right', color: `${jobLevelValue === "" ? "#9999" : ""}` }} onClick={() => { this.setState({ chooseJobLevel: true }) }}>
                {jobLevelValue ? jobLevelValue : "请选择"} <RightOutlined />
              </div>
            </Form.Item>
            <Form.Item
              label='入职日期'
              name='joinTime'
              rules={[{ required: true, message: '请选择入职时间' }]}
            >
              <div style={{ 'textAlign': 'right', color: `${joinTime === "" ? "#9999" : ""}` }} onClick={() => { this.setState({ choosejoinTime: true }) }}>
                {joinTime ? joinTime : "请选择"} <RightOutlined />
              </div>
            </Form.Item>
            <Form.Item
              label='试用期限'
              extra={
                <div style={{ backgroundColor: 'rgb(215, 215, 215,1)' }}>
                  月
                </div>
              }
              name='probationMonthNum'
              rules={[{ required: true, message: '请输入试用期' },
              { pattern: /^(0|[1-9]\d?)$/, message: '请输入正整数（0-99）' }]}
            >
              <Input type="number" min={0} max={99} precision={0} style={{ '--text-align': 'right' }} placeholder="请输入试用期" />
            </Form.Item>
            <Form.Item
              label='协议/合同期限'
              extra={
                <div style={{ backgroundColor: 'rgb(215, 215, 215,1)' }}>
                  年
                </div>
              }
              name='contractYearNum'
              rules={[{ required: true, message: '请输入合同期限' },
              { pattern: /^(?!0\d)([1-9]|[1-9]\d)$/, message: '请输入正整数（1-99）' }]}
            >
              <Input type="number" min={1} max={99} precision={0} style={{ '--text-align': 'right' }} placeholder="请输入合同期限" />
            </Form.Item>
            <Form.Item
              label='工作地区'
              name='ssaid'
              rules={[{ required: true, message: '请选择工作地区' }]}
            >
              <div style={{ 'textAlign': 'right', color: `${ssaidValue === "" ? "#9999" : ""}` }} onClick={() => { this.setState({ chooseSsaid: true }) }}>
                {ssaidValue ? ssaidValue : "请选择"} <RightOutlined />
              </div>
            </Form.Item>
            <Form.Item
              label='部门'
              name='deptId'
              rules={[{ required: true, message: '请选择所属部门' }]}
            >
              <div style={{ 'textAlign': 'right', color: `${deptValue === "" ? "#9999" : ""}` }} onClick={() => { this.setState({ chooseDept: true }) }}>
                {deptValue ? deptValue : "请选择"} <RightOutlined />
              </div>
            </Form.Item>
            <Form.Item
              label='直属上级'
              name='leaderId'
              rules={[{ required: true, message: '请选择直属上级' }]}
            >
              <div style={{ 'textAlign': 'right', color: `${leaderValue === "" ? "#9999" : ""}` }} onClick={() => { this.setState({ chooseLeader: true }) }}>
                {leaderValue ? leaderValue : "请选择"} <RightOutlined />
              </div>
            </Form.Item>
            <Form.Item label='招聘人' name='recruitId'>
              <div style={{ 'textAlign': 'right', color: `${recruitValue === "" ? "#9999" : ""}` }} onClick={() => { this.setState({ chooseRecruit: true }) }}>
                {recruitValue ? recruitValue : "请选择"} <RightOutlined />
              </div>
            </Form.Item>
            <Form.Header>
              <Row style={{ height: '50px', display: 'flex', alignItems: 'center' }}>
                <Tag color='#409EFF' style={{ height: '20px' }}></Tag>
                <Col style={{ fontSize: '18px', marginLeft: '10px' }}>薪资信息</Col>
              </Row>
            </Form.Header>
            <Form.Item
              label='转正前薪资'
              name='beforeSalary'
              rules={[
                { pattern: /^(0|[1-9][0-9]{0,5})$/, message: '请输入六位正整数以内的值' }]}
            >
              <Input placeholder='请填写转正前薪资' style={{ '--text-align': 'right' }} />
            </Form.Item>
            <Form.Item
              label='转正后薪资'
              name='afterSalary'
              rules={[
                { pattern: /^(0|[1-9][0-9]{0,5})$/, message: '请输入六位正整数以内的值' }]}
            >
              <Input placeholder='请填写转正后薪资' style={{ '--text-align': 'right' }} />
            </Form.Item>
            <Form.Item label='工资卡银行' name='cId'
              rules={[{ required: true, message: '请选择工资卡银行' }]}
            >
              <div style={{ 'textAlign': 'right', color: `${cIdValue === "" ? "#9999" : ""}` }} onClick={() => { this.setState({ choosecId: true }) }}>
                {cIdValue ? cIdValue : "请选择"} <RightOutlined />
              </div>
            </Form.Item>
            <Form.Item label='五险一金缴纳机构' name='socialAgency'
              rules={[{ required: staffType === 3 ? false : true, message: '请选择五险一金缴纳机构' }]}
            >
              <div style={{ 'textAlign': 'right', color: `${socialAgencyValue === "" ? "#9999" : ""}` }} onClick={() => { this.setState({ chooseSocialAgency: true }) }}>
                {socialAgencyValue ? socialAgencyValue : "请选择"} <RightOutlined />
              </div>
            </Form.Item>
            <Form.Item label='五险一金缴纳方式' name='paymentMethodId'
              rules={[{ required: staffType === 3 ? false : true, message: '请选择五险一金缴纳方式' }]}
            >
              <div style={{ 'textAlign': 'right', color: `${paymentMethodValue === "" ? "#9999" : ""}` }} onClick={() => { this.setState({ choosePaymentMethod: true }) }}>
                {paymentMethodValue ? paymentMethodValue : "请选择"} <RightOutlined />
              </div>
            </Form.Item>
            <Form.Item label='备注' layout='vertical' name='description'
              rules={[
                { required: false, message: '备注' },
                { max: 200, message: '请输入备注，200字以内' }
              ]}
            >
              <TextArea
                placeholder='请填写备注信息'
                showCount
                minLength={0}
                maxLength={200}
              />
            </Form.Item>
          </Form>
        </div>

        {/* 员工所属类别弹窗 */}
        <Popup
          visible={chooseStaffType}
          onMaskClick={this.getDutyById}
          bodyStyle={{
            borderTopLeftRadius: '10px',
            borderTopRightRadius: '10px',
            minHeight: '40vh',
          }}
        >
          <div style={{ fontSize: '16px', display: 'flex', justifyContent: 'space-between', alignItems: 'center', padding: '10px', borderBottom: '1px solid #ccc' }}>
            <Button
              type="link"
              onClick={() => { this.setState({ chooseStaffType: false }) }}
              style={{
                color: '#409EFF',
                fontSize: '16px',
              }}
            >
              取消
            </Button>
            <span>{'选择员工类别'}</span>
            <Button
              type="link"
              onClick={this.getDutyById}
              style={{
                color: '#409EFF',
                fontSize: '16px',
              }}
              key="submit"
              htmlType="submit"
            >
              确定
            </Button>
          </div>
          <div style={{ padding: '10px' }}>
            <CheckList
              extra={active =>
                active ? <CheckCircleFilled /> : <CheckCircleOutlined />
              }
              onChange={(value) => { this.setState({ staffType: value[0] }) }}
              defaultValue={staffType ? [staffType] : []}
            >
              <CheckList.Item value={0}>本部</CheckList.Item>
              <CheckList.Item value={1}>项目</CheckList.Item>
              <CheckList.Item value={2}>顾问</CheckList.Item>
              <CheckList.Item value={3}>实习</CheckList.Item>
              <CheckList.Item value={4}>退休返聘</CheckList.Item>
            </CheckList>
          </div>
        </Popup>

        {/* 职务/技能 */}
        <Popup
          visible={chooseStaffJob}
          onMaskClick={this.getStaff}
          bodyStyle={{
            borderTopLeftRadius: '10px',
            borderTopRightRadius: '10px',
            height: '55vh',
          }}
        >
          <div style={{ fontSize: '16px', display: 'flex', justifyContent: 'space-between', alignItems: 'center', padding: '10px', borderBottom: '1px solid #ccc' }}>
            <Button
              type="link"
              onClick={() => { this.setState({ chooseStaffJob: false }) }}
              style={{
                color: '#409EFF',
                fontSize: '16px',
              }}
            >
              取消
            </Button>
            <span>{'选择职务/技能'}</span>
            <Button
              type="link"
              onClick={this.getStaff}
              style={{
                color: '#409EFF',
                fontSize: '16px',
              }}
              key="submit"
              htmlType="submit"
            >
              确定
            </Button>
          </div>
          <span >
            <SearchBar placeholder='搜索'
              searchIcon={<SearchOutlined />}
              style={{ '--background': 'rgba(242, 242, 242, 1)', '--height': '40px' }}
              onChange={this.searchStaffJob}
            />
          </span>

          <div style={{ height: '100%', padding: '10px', overflowY: 'scroll' }}>
            <CheckList
              extra={active =>
                active ? <CheckCircleFilled /> : <CheckCircleOutlined />
              }
              onChange={(value) => { this.setState({ staffJob: value[0] }) }}
              defaultValue={staffJob ? [staffJob] : []}
            >
              {positionData.map(item => (
                <CheckList.Item key={item.dvId} value={item.dictValue}>
                  {item.dictValueDesc}
                </CheckList.Item>
              ))}
            </CheckList>
          </div>
        </Popup>

        {/* 职级/级别 */}
        <Popup
          visible={chooseJobLevel}
          onMaskClick={() => { this.setState({ chooseJobLevel: false }) }}
          bodyStyle={{
            borderTopLeftRadius: '10px',
            borderTopRightRadius: '10px',
            height: '55vh',
          }}
        >
          <div style={{ fontSize: '16px', display: 'flex', justifyContent: 'space-between', alignItems: 'center', padding: '10px', borderBottom: '1px solid #ccc' }}>
            <Button
              type="link"
              onClick={() => {
                this.setState({ chooseJobLevel: false })
              }}
              style={{
                color: '#409EFF',
                fontSize: '16px',
              }}
            >
              取消
            </Button>
            <span>{'选择职级/级别'}</span>
            <Button
              type="link"
              onClick={() => {
                this.setState({
                  chooseJobLevel: false,
                  jobLevelValue: this.state.levelData.find(item => item.levelId === jobLevel)?.levelName
                })
                this.formRef.current.setFieldsValue({ jobLevel: jobLevel })
              }}
              style={{
                color: '#409EFF',
                fontSize: '16px',
              }}
              key="submit"
              htmlType="submit"
            >
              确定
            </Button>
          </div>
          <span >
            <SearchBar placeholder='搜索'
              searchIcon={<SearchOutlined />}
              style={{ '--background': 'rgba(242, 242, 242, 1)', '--height': '40px', }}
              onChange={this.searchJobLevel}
            />
          </span>
          <div style={{ height: '100%', padding: '10px', overflowY: 'scroll' }}>
            <CheckList
              extra={active =>
                active ? <CheckCircleFilled /> : <CheckCircleOutlined />
              }
              onChange={(value) => { this.setState({ jobLevel: value[0] }) }}
            >
              {levelData.map(item => (
                <CheckList.Item key={item.levelId} value={item.levelId}>
                  {item.levelName}
                </CheckList.Item>
              ))}
            </CheckList>
          </div>
        </Popup>

        {/* 选择日期 */}
        <Popup
          visible={choosejoinTime}
          onMaskClick={() => { this.setState({ choosejoinTime: false }) }}
          bodyStyle={{
            borderTopLeftRadius: '10px',
            borderTopRightRadius: '10px',
            minHeight: '50vh',
          }}
        >
          <div style={{ fontSize: '16px', display: 'flex', justifyContent: 'space-between', alignItems: 'center', padding: '10px', borderBottom: '1px solid #ccc' }}>
            <Button
              type="link"
              onClick={() => { this.setState({ choosejoinTime: false }) }}
              style={{
                color: '#409EFF',
                fontSize: '16px',
              }}
            >
              取消
            </Button>
            <span>{'选择日期'}</span>
            <Button
              type="link"
              onClick={() => { this.setState({ choosejoinTime: false }) }}
              style={{
                color: '#409EFF',
                fontSize: '16px',
              }}
              key="submit"
              htmlType="submit"
            >
              确定
            </Button>
          </div>
          <div style={{ padding: '10px', height: '100%', overflowY: 'scroll' }}>
            <Calendar
              selectionMode='single'
              onChange={value => {
                this.setState({ joinTime: moment(value).format('YYYY-MM-DD'), })
                this.formRef.current.setFieldsValue({ joinTime: value })
              }} nm
            />
          </div>
        </Popup>

        {/* 工作地区 */}
        <Popup
          visible={chooseSsaid}
          onMaskClick={() => { this.setState({ chooseSsaid: false }) }}
          bodyStyle={{
            borderTopLeftRadius: '10px',
            borderTopRightRadius: '10px',
            minHeight: '50vh',
          }}
        >
          <span></span>
          <div style={{ fontSize: '16px', display: 'flex', justifyContent: 'space-between', alignItems: 'center', padding: '10px', borderBottom: '1px solid #ccc' }}>
            <Button
              type="link"
              onClick={() => { this.setState({ chooseSsaid: false }) }}
              style={{
                color: '#409EFF',
                fontSize: '16px',
              }}
            >
              取消
            </Button>
            <span>{'选择工作地区'}</span>
            <Button
              type="link"
              onClick={
                () => {
                  this.setState({
                    chooseSsaid: false,
                    ssaidValue: this.state.workLocaleList.find(item => item.ssaid === ssaid)?.workLocale
                  })
                  this.formRef.current.setFieldsValue({ ssaid: ssaid })
                }
              }
              style={{
                color: '#409EFF',
                fontSize: '16px',
              }}
              key="submit"
              htmlType="submit"
            >
              确定
            </Button>
          </div>
          <div style={{ padding: '10px', height: '100%', overflowY: 'scroll' }}>
            <CheckList
              extra={active =>
                active ? <CheckCircleFilled /> : <CheckCircleOutlined />
              }
              onChange={(value) => { this.setState({ ssaid: value[0] }) }}
              defaultValue={ssaid ? [ssaid] : []}
            >
              {workLocaleList.map(item => (
                <CheckList.Item key={item.ssaid} value={item.ssaid}>
                  {item.workLocale}
                </CheckList.Item>
              ))}
            </CheckList>
          </div>
        </Popup>

        {/* 所属部门 */}
        <Popup
          visible={chooseDept}
          onMaskClick={() => { this.setState({ chooseDept: false }) }}
          bodyStyle={{
            borderTopLeftRadius: '10px',
            borderTopRightRadius: '10px',
            height: '50vh',
          }}
        >
          <span></span>
          <div style={{ fontSize: '16px', display: 'flex', justifyContent: 'space-between', alignItems: 'center', padding: '10px', borderBottom: '1px solid #ccc' }}>
            <Button
              type="link"
              onClick={() => { this.setState({ chooseDept: false }) }}
              style={{
                color: '#409EFF',
                fontSize: '16px',
              }}
            >
              取消
            </Button>
            <span>{'选择所属部门'}</span>
            <Button
              type="link"
              onClick={
                () => {
                  this.setState({
                    chooseDept: false,
                    deptValue: deptValue
                  })
                  this.formRef.current.setFieldsValue({ deptId: deptId, deptName: deptValue })
                }
              }
              style={{
                color: '#409EFF',
                fontSize: '16px',
              }}
              key="submit"
              htmlType="submit"
            >
              确定
            </Button>
          </div>
          <span>
            <SearchBar placeholder='搜索'
              searchIcon={<SearchOutlined />}
              style={{ '--background': 'rgba(242, 242, 242, 1)', '--height': '40px', fontSize: '18px' }}
              onChange={this.searchDepartmentName}
            />
          </span>
          <div style={{ padding: '10px', height: '100%', overflowY: 'scroll' }}>
            <ConfigProvider
              theme={{
                components: {
                  Tree: {
                    titleHeight: '40px',
                  },
                },
                token: {
                  fontSize: 18
                },
              }}
            >
              <Tree
                style={{ width: '100%' }}
                fieldNames={{ title: 'departmentName', key: 'departmentId', children: 'children' }}
                onSelect={(value, e) => { this.setState({ deptId: value[0], deptValue: e.node.departmentName }) }}
                treeData={treeData}
              />
            </ConfigProvider>
          </div>
        </Popup >

        {/* 选择直属上级 */}
        < Popup
          visible={chooseLeader}
          onMaskClick={() => { this.setState({ chooseLeader: false }) }
          }
          bodyStyle={{
            borderTopLeftRadius: '10px',
            borderTopRightRadius: '10px',
            height: '75vh',
          }}
        >
          < div style={{ fontSize: '16px', display: 'flex', justifyContent: 'space-between', alignItems: 'center', padding: '10px', borderBottom: '1px solid #ccc' }}>
            <Button
              type="link"
              onClick={() => { this.setState({ chooseLeader: false }) }}
              style={{
                color: '#409EFF',
                fontSize: '16px',
              }}
            >
              取消
            </Button>
            <span>{'选择成员'}</span>
            <Button
              type="link"
              onClick={() => {
                this.setState({
                  chooseLeader: false,
                  leaderValue: leaderValue
                })
                this.formRef.current.setFieldsValue({ leaderId: leaderId, leaderName: leaderValue })
              }}
              style={{
                color: '#409EFF',
                fontSize: '16px',
              }}
              key="submit"
              htmlType="submit"
            >
              确定
            </Button>
          </div >
          <div style={{ height: '100%', padding: '10px', overflowY: 'scroll' }}>
            <SearchBar placeholder='搜索成员'
              searchIcon={<SearchOutlined />}
              style={{ '--background': 'rgba(242, 242, 242, 1)', '--height': '40px', fontSize: '18px' }}
              onChange={this.searchLeader}

            />
            <IndexBar>
              {recruitData ? (recruitData.map(group => {
                const { surname, staffInfoGroupBySurnames } = group
                return (
                  <IndexBar.Panel
                    index={surname}
                    title={surname ? surname : <StarFilled />}
                    key={surname}
                  >
                    <List>
                      <List.Item style={{ width: '95%' }}>

                        <CheckList
                          extra={active =>
                            active ? <CheckCircleFilled /> : <CheckCircleOutlined />
                          }
                          onChange={(value) => {
                            if (value[0]) {
                              this.setState({ leaderId: value[0].staffId, leaderValue: value[0].staffName })
                            }

                          }}
                        >
                          {staffInfoGroupBySurnames.map(item => (
                            <CheckList.Item key={item.staffId} value={item}>
                              {<Row
                                type="flex"
                                justify="space-between"
                                align="middle"
                                gutter={0}
                                style={{ padding: '14px 0px 0px 0px' }}
                              >
                                <Col span={4} >
                                  <div style={{ width: "45px", height: '45px' }}>
                                    {item?.sysUserHead ? (
                                      <Avatar src={item.sysUserHead} style={{ '--border-radius': '8px' }} />
                                    ) : (
                                      <Avatar src='' />
                                    )}
                                  </div>
                                </Col>
                                <Col span={20} >
                                  <div
                                    style={{ fontSize: "15px", color: "#333333" }}
                                    title={item?.staffName || item?.staffName}
                                  >
                                    {item?.staffName || item?.staffName}
                                  </div>
                                  <div
                                    style={{ marginTop: 5, fontSize: "13px", color: '#C9C9C9' }}
                                    title={item?.deptName + '-' + item?.staffJobName}
                                  >
                                    {item?.deptName + ' / ' + item?.staffJobName}
                                  </div>
                                </Col>
                              </Row>}
                            </CheckList.Item>
                          ))}
                        </CheckList>
                      </List.Item>
                    </List>

                  </IndexBar.Panel>
                )
              })) : null}
            </IndexBar>
          </div>
        </Popup >

        {/* 选择招聘人 */}
        < Popup
          visible={chooseRecruit}
          onMaskClick={() => { this.setState({ chooseRecruit: false }) }}
          bodyStyle={{
            borderTopLeftRadius: '10px',
            borderTopRightRadius: '10px',
            height: '75vh',
          }}
        >
          < div style={{ fontSize: '16px', display: 'flex', justifyContent: 'space-between', alignItems: 'center', padding: '10px', borderBottom: '1px solid #ccc' }}>
            <Button
              type="link"
              onClick={() => { this.setState({ chooseRecruit: false }) }}
              style={{
                color: '#409EFF',
                fontSize: '16px',
              }}
            >
              取消
            </Button>
            <span>{'选择成员'}</span>
            <Button
              type="link"
              onClick={() => {
                this.setState({
                  chooseRecruit: false,
                  recruitValue: recruitValue
                })
                this.formRef.current.setFieldsValue({ recruitId: recruitId, recruitName: recruitValue })
              }}
              style={{
                color: '#409EFF',
                fontSize: '16px',
              }}
              key="submit"
              htmlType="submit"
            >
              确定
            </Button>
          </div >
          <div style={{ height: '100%', padding: '10px', overflowY: 'scroll' }}>
            <SearchBar placeholder='搜索成员'
              searchIcon={<SearchOutlined />}
              style={{ '--background': 'rgba(242, 242, 242, 1)', '--height': '40px', fontSize: '18px' }}
              onChange={this.searchLeader}

            />
            <IndexBar>
              {recruitData ? (recruitData.map(group => {
                const { surname, staffInfoGroupBySurnames } = group
                return (
                  <IndexBar.Panel
                    index={surname}
                    title={surname}
                    key={surname}
                  >
                    <List>
                      <List.Item style={{ width: '95%' }}>

                        <CheckList
                          extra={active =>
                            active ? <CheckCircleFilled /> : <CheckCircleOutlined />
                          }
                          onChange={(value) => {
                            if (value[0]) {
                              this.setState({ recruitId: value[0].staffId, recruitValue: value[0].staffName })
                            }
                          }}
                        >
                          {staffInfoGroupBySurnames ? (staffInfoGroupBySurnames.map(item => (
                            <CheckList.Item key={item.staffId} value={item}>
                              {<Row
                                type="flex"
                                justify="space-between"
                                align="middle"
                                gutter={0}
                                style={{ padding: '14px 0px 0px 0px' }}
                              >
                                <Col span={4}>
                                  <div style={{ width: "45px", height: '45px' }}>
                                    {item?.sysUserHead ? (
                                      <Avatar src={item.sysUserHead} style={{ '--border-radius': '8px' }} />
                                    ) : (
                                      <Avatar src='' />
                                    )}
                                  </div>
                                </Col>
                                <Col span={20} >
                                  <div
                                    style={{ fontSize: "15px", color: "#333333" }}
                                    title={item?.staffName || item?.staffName}
                                  >
                                    {item?.staffName || item?.staffName}
                                  </div>
                                  <div
                                    style={{ marginTop: 5, fontSize: "13px", color: '#C9C9C9' }}
                                    title={item?.deptName + '-' + item?.staffJobName}
                                  >
                                    {item?.deptName + ' / ' + item?.staffJobName}
                                  </div>
                                </Col>
                              </Row>}
                            </CheckList.Item>
                          ))) : null}
                        </CheckList>
                      </List.Item>
                    </List>

                  </IndexBar.Panel>
                )
              })) : null}
            </IndexBar>
          </div>
        </Popup >

        {/* 选择工资卡银行 */}
        < Popup
          visible={choosecId}
          onMaskClick={() => { this.setState({ choosecId: false }) }}
          bodyStyle={{
            borderTopLeftRadius: '10px',
            borderTopRightRadius: '10px',
            height: '55vh',
          }}
        >
          <span></span>
          <div style={{ fontSize: '16px', display: 'flex', justifyContent: 'space-between', alignItems: 'center', padding: '10px', borderBottom: '1px solid #ccc' }}>
            <Button
              type="link"
              onClick={() => {
                this.setState({ choosecId: false })
              }}
              style={{
                color: '#409EFF',
                fontSize: '16px',
              }}
            >
              取消
            </Button>
            <span>{'选择工资卡银行'}</span>
            <Button
              type="link"
              onClick={() => {
                this.setState({
                  choosecId: false,
                  cIdValue: payCardList.find(item => item.cId === cId)?.bankName
                })
                this.formRef.current.setFieldsValue({ cId: cId })
              }}
              style={{
                color: '#409EFF',
                fontSize: '16px',
              }}
              key="submit"
              htmlType="submit"
            >
              确定
            </Button>
          </div>
          <div style={{ height: '100%', padding: '10px', overflowY: 'scroll' }}>
            <CheckList
              extra={active =>
                active ? <CheckCircleFilled /> : <CheckCircleOutlined />
              }
              onChange={(value) => { this.setState({ cId: value[0] }) }}
            >
              {payCardList.map(item => (
                <CheckList.Item key={item.cId} value={item.cId}>
                  {item.bankName}
                </CheckList.Item>
              ))}
            </CheckList>
          </div>
        </Popup >

        {/* 选择缴纳机构 */}
        < Popup
          visible={chooseSocialAgency}
          onMaskClick={() => { this.setState({ chooseSocialAgency: false }) }}
          bodyStyle={{
            borderTopLeftRadius: '10px',
            borderTopRightRadius: '10px',
            height: '55vh',
          }}
        >
          <span></span>
          <div style={{ fontSize: '16px', display: 'flex', justifyContent: 'space-between', alignItems: 'center', padding: '10px', borderBottom: '1px solid #ccc' }}>
            <Button
              type="link"
              onClick={() => {
                this.setState({ chooseSocialAgency: false })
              }}
              style={{
                color: '#409EFF',
                fontSize: '16px',
              }}
            >
              取消
            </Button>
            <span>{'选择缴纳机构'}</span>
            <Button
              type="link"
              onClick={() => {
                this.setState({
                  chooseSocialAgency: false,
                  socialAgencyValue: socialAgencyList.find(item => item.socialAgencyId === socialAgencyId)?.socialAgencyName
                })
                this.formRef.current.setFieldsValue({ socialAgency: socialAgencyId })
              }}
              style={{
                color: '#409EFF',
                fontSize: '16px',
              }}
              key="submit"
              htmlType="submit"
            >
              确定
            </Button>
          </div>
          <div style={{ height: '100%', padding: '10px', overflowY: 'scroll' }}>
            <CheckList
              extra={active =>
                active ? <CheckCircleFilled /> : <CheckCircleOutlined />
              }
              onChange={(value) => { this.setState({ socialAgencyId: value[0] }) }}
            >
              {socialAgencyList.map(item => (
                <CheckList.Item key={item.socialAgencyId} value={item.socialAgencyId}>
                  {item.socialAgencyName}
                </CheckList.Item>
              ))}
            </CheckList>
          </div>
        </Popup >

        {/* 选择缴纳方式 */}
        < Popup
          visible={choosePaymentMethod}
          onMaskClick={() => { this.setState({ choosePaymentMethod: false }) }}
          bodyStyle={{
            borderTopLeftRadius: '10px',
            borderTopRightRadius: '10px',
            height: '55vh',
          }}
        >
          <span></span>
          <div style={{ fontSize: '16px', display: 'flex', justifyContent: 'space-between', alignItems: 'center', padding: '10px', borderBottom: '1px solid #ccc' }}>
            <Button
              type="link"
              onClick={() => {
                this.setState({ choosePaymentMethod: false })
              }}
              style={{
                color: '#409EFF',
                fontSize: '16px',
              }}
            >
              取消
            </Button>
            <span>{'选择缴纳方式'}</span>
            <Button
              type="link"
              onClick={() => {
                this.setState({
                  choosePaymentMethod: false,
                  paymentMethodValue: socinsuList.find(item => item.paymentMethodId === paymentMethodId)?.paymentMethodName
                })
                this.formRef.current.setFieldsValue({ paymentMethodId: paymentMethodId })
              }}
              style={{
                color: '#409EFF',
                fontSize: '16px',
              }}
              key="submit"
              htmlType="submit"
            >
              确定
            </Button>
          </div>
          <div style={{ height: '100%', padding: '10px', overflowY: 'scroll' }}>
            <CheckList
              extra={active =>
                active ? <CheckCircleFilled /> : <CheckCircleOutlined />
              }
              onChange={(value) => { this.setState({ paymentMethodId: value[0] }) }}
            >
              {socinsuList.map(item => (
                <CheckList.Item key={item.paymentMethodId} value={item.paymentMethodId}>
                  {item.paymentMethodName}
                </CheckList.Item>
              ))}
            </CheckList>
          </div>
        </Popup >

      </div >
    )
  }
}